<!DOCTYPE html>
<html>
<head>

    <title>皮肤病分类</title>
    <style>
        .folder-results-container {
            display: flex;
            flex-wrap: nowrap; /* Ensure items stay in a single line */
            overflow-x: auto; /* Enable horizontal scrolling if needed */
            justify-content: flex-start; /* Align items to the start of the container */
            margin-top: 20px; /* Adjust margin as needed */
        }

        .folder-result {
            flex: 0 0 auto; /* Don't allow items to grow, shrink, or basis */
            margin-right: 10px; /* Adjust margin between items as needed */
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Skinclassinator" />
    <meta name="author" content="Antigua" />
    <meta property="og:title" content="darkmatter" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="website, machine learning, project" />
    <meta property="og:image" content="{{ url_for('static',filename='images/rick.gif') }}" />
    <meta property="og:site_name" content="skinclassinator" />
    <meta property="og:url" content="https://antiguadominic.com/" />
    <!-- Stylesheets -->
    <link rel="stylesheet" href="path/to/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css') }}">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400&display=swap" rel="stylesheet">
    <!-- Scripts -->
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/bootstrap.bundle.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/main.js') }}"></script>
    <script src="https://kit.fontawesome.com/1f4f02a0a7.js" crossorigin="anonymous"></script>
    <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top px-5">
        <!-- ... -->
    </nav>
</head>
<body class="container-fluid">
    <nav class="navbar navbar-dark bg-success navbar-expand-lg fixed-top px-5">
        <a class="navbar-brand" href="/#home">
            <h3>皮肤病分类</h3>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-2" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse d-xl-flex justify-content-xl-end" id="navbar-list-2">
            <ul class="navbar-nav">
                <li class="nav-item mx-4">
                    <a href="/#home" class="section-link text-uppercase small nav-link text-center">home</a>
                </li>
                <li class="nav-item mx-4">
                    <a href="/#motivation" class="section-link text-uppercase small nav-link text-center">动因</a>
                </li>
                <li class="nav-item mx-4">
                    <a href="/#analyze" class="section-link text-uppercase small nav-link text-center">图像分析</a>
                </li>
                <li class="nav-item mx-4">
                    <a href="/#contact" class="section-link text-uppercase small nav-link text-center">联系</a>
                </li>
            </ul>
        </div>
    </nav>
    <!--- -->
    <section id="home" class="my-auto mx-auto container-fluid" style="background-image: url('static/images/body.jpg'); background-size: cover; background-position: center;">
        <div class="container h-100">
            <div class="row align-items-center h-100">
                <div class="col-12 mx-auto text-center">
                    <!-- <img src="{{ url_for('static',filename='images/haha.jpg') }}" width="180" height="180"> -->
                    <h1 class="display-3 font-weight-bolder intro-text text-warning text-uppercase mt-3 mb-header">我的皮肤病分类工作?</h1>
                    <p class="text-black h5 mb-headerdesc">
                        在使用InceptionV3模型进行皮肤癌检测时，需要收集大量的皮肤病变图像作为训练数据集，并对这些图像进行预处理和标注。然后，可以使用深度学习框架（如TensorFlow或PyTorch）来搭建InceptionV3模型，并进行训练和优化。最后，可以使用测试数据集来评估模型的性能和准确度，并进行必要的调整和改进。
    
                        通过使用InceptionV3模型进行皮肤癌检测，可以提高诊断的准确性和效率，帮助更多的患者获得及时的治疗和康复。同时，这也是一项非常有挑战性和有趣的工作，可以让您深入了解计算机视觉和深度学习领域的最新技术和发展趋势。
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section id="motivation" class="mb-5 py-5 container-fluid" style="background-image: url('static/images/ff.jpg'); background-size: cover; background-position: center;">
        <div class="container">
            <h2 class="text-center text-uppercase">动因</h2>
            <div class="row d-flex justify-content-center mt-5">
                <div class="col-lg-3 col-sm-12 text-center p-5 shadow-lg mr-lg-5 mb-3">
                    <img class="mb-3" src="{{ url_for('static',filename='images/cancer.png') }}" width="100">
                    <h3>皮肤病分类</h3>
                    <p class="text-left">黑色素瘤相对于其他一些类型的皮肤癌来说较为罕见。但是黑色素瘤更加危险，因为如果不及早发现和治疗，它更有可能向身体的其他部位扩散。</p>
                </div>
                <div class="col-lg-3 col-sm-12 text-center p-5 shadow-lg mr-lg-5 mb-3">
                    <img class="mb-3" src="{{ url_for('static',filename='images/pie-chart.png') }}" width="100">
                    <h3>统计数字</h3>
                    <p class="text-left">根据世界卫生组织的数据，全球每年因皮肤癌导致的死亡人数约为13万人。其中，恶性黑色素瘤是皮肤癌中最危险的一种类型，也是导致皮肤癌死亡的主要原因之一。

						以下是一些皮肤癌的统计数据：
						
						 1. 发病率：全球每年新发皮肤癌病例约为280万例，其中恶性黑色素瘤占比较高。
						
						 2. 死亡率：全球每年因皮肤癌导致的死亡人数约为13万人。
						
						 3. 高危人群：恶性黑色素瘤通常发生在50岁以上的人群中，特别是那些曾经暴露在紫外线下的人。此外，白种人、浅色皮肤、容易晒伤的人以及家族中有皮肤癌病史的人也更容易患上皮肤癌。</p>
                </div>
                <div class="col-lg-3 col-sm-12 text-center p-5 shadow-lg mr-lg-5 mb-3">
                    <img class="mb-3" src="{{ url_for('static',filename='images/survival.png') }}" width="100">
                    <h3>死亡率</h3>
                    <p class="text-left">
                        皮肤癌的死亡率相对较低，但如果不及时发现和治疗，可能会导致严重后果。根据世界卫生组织的数据，全球每年因皮肤癌导致的死亡人数约为13万人。

其中，恶性黑色素瘤是皮肤癌中最危险的一种类型，也是导致皮肤癌死亡的主要原因之一。恶性黑色素瘤通常表现为黑色素瘤痣的形态改变、颜色加深、边缘模糊等，如果不及时治疗，可能会迅速扩散到淋巴结和其他器官，导致转移性皮肤癌。

其他类型的皮肤癌如基底细胞癌、鳞状细胞癌等虽然相对较为良性，但如果不及时治疗，也可能会对身体造成一定的危害。因此，对于任何疑似皮肤癌的症状，应及时就医进行诊断和治疗，以降低死亡风险。同时，定期进行皮肤检查也是预防皮肤癌的重要措施之一。
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section id="analyze" class="bg-danger mb-5 py-5 container-fluid" style="background-image: url('/static/images/first.gif'); background-size: cover; background-position: center;">
        <!-- ... 其他部分保持不变 ... -->
        {% if scroll %}
		<script>
          document.location.hash = '#' + '{{ scroll }}';
		</script>
		{% endif %}
        <div class="col-lg-6 px-5 my-auto">
            <!-- 单张图像上传表单 -->
            <form method="post" enctype="multipart/form-data" action="/upload">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon01">上传单个图像</span>
                    </div>
                    <div class="custom-file">
                        <input type="file" name="file" class="custom-file-input" id="image_upload" aria-describedby="inputGroupFileAddon01" required>
                        <label class="custom-file-label" for="image_upload">选择文件</label>
                    </div>
                </div>
                <h6 class=""><b><label>Note:</label></b>
                    <ul>
                        <li>仅接受图像文件类型: <b><label class="text-warning">png, jpg, jpeg</label></b></li>
                        <li>模糊的图像可能导致错误的结果</li>
                        <li>不应被视为绝对真理</li>
                    </ul>
                </h6>
                <input type="submit" value="Analyze Single Image" class="col-sm-12 mt-2 btn btn-warning">
            </form>
            <div class="col-lg-12 my-3"></div>
            <!-- 文件夹图像上传表单 -->
            {% if scroll %}
		<script>
          document.location.hash = '#' + '{{ scroll }}';
		</script>
		{% endif %}
            <form method="post" enctype="multipart/form-data" action="/upload_folder">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="inputGroupFileAddon02">上传文件夹</span>
                    </div>
                    <div class="custom-file">
                        <input type="file" name="folder" class="custom-file-input" id="folder_upload" aria-describedby="inputGroupFileAddon02" webkitdirectory="" directory="" multiple required>
                        <label class="custom-file-label" for="folder_upload">选择文件夹</label>
                    </div>
                </div>
                <input type="submit" value="Analyze Folder" class="col-sm-12 mt-2 btn btn-warning">
            </form>
        </div>
    
        <!-- 结果显示部分 -->
        {% if image and data %}
        <div class="col-lg-6 col-sm-12 text-center mb-line mt-5 container-fluid">
            <div class="container mt-4">
                <h3 class="text-warning">结果分析: </h3>
                <div class="row  my-4">
                    <div class="col-sm-5 col-12 mb-3">
                        <img src="{{ image }}" alt="Mole Image" class="img-thumbnail img-responsive" width="220" height="220">
                    </div>
                    <div class="col-sm-7 my-auto mb-predict">
                        <div class="mb-2 col-12 ">
                            <a href="https://www.webmd.com/search/search_results/default.aspx?query={{data.class1}}" target="_blank" class="btn btn-sm btn-warning text-uppercase"><b>{{ data.class1 }}</b> : {{data.prob1}}%</a>
                        </div>
                        <div class="mb-2 col-12">
                            <a href="https://www.webmd.com/search/search_results/default.aspx?query={{data.class2}}" target="_blank" class="btn btn-sm btn-info text-uppercase"><b>{{ data.class2 }}</b> : {{data.prob2}}%</a>
                        </div>
                        <div class="mb-2 col-12">
                            <a href="https://www.webmd.com/search/search_results/default.aspx?query={{data.class3}}" target="_blank" class="btn btn-sm btn-success text-uppercase"><b>{{ data.class3 }}</b> : {{data.prob3}}%</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% if folder_images %}
    <div class="col-lg-6 col-sm-12 text-center mb-line mt-5 container-fluid">
        <div class="container mt-4">
            <h3 class="text-warning">文件夹结果分析: </h3>
            <div class="folder-results-container">
                {% for prediction in folder_images %}
                    <div class="folder-result">
                        <img src="{{ prediction.image }}" alt="{{ prediction.image }}" class="img-thumbnail img-responsive" width="220" height="220">
                        <p>{{ prediction.image }}</p>
                        <a href="https://www.webmd.com/search/search_results/default.aspx?query={{ prediction['class'] }}" target="_blank" class="btn btn-sm btn-warning text-uppercase"><b>{{ prediction['class'] }}</b> : {{ prediction['probability'] }}%</a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endif %}

    </section>
    
    <section id="contact" class="pb-5 container-fluid" style="background-image: url('/static/images/four.gif'); background-size: cover; background-position: center;">
        <div class="container text-center">
            <h2 class="text-center text-uppercase text-dark">有问题请联系我</h2>
            <div class="mt-2">
                <div class="row">
                    <div class="col-12 mt-5">
                        <img src="{{ url_for('static', filename='images/morty.gif') }}" class="img-circle" width="170" height="160">
                        <h4 class="text-center mt-3">Lss</h4>
                        <h6 class="text-danger">成都</h6>
                        <h6 class="team-position">QQ号码：2730727691</h6>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="page-footer text-white bg-dark p-4">
        <div class="footer-copyright text-center py-1">
